<template>
  <header class="main-header">
    <div class="z10">
      <a
        href="javascript:void(0);"
        class="uppercase menu-toggle"
        :class="{
          'menu-toggle--opened': opened
        }"
        @click="changeOpened('toggle')"
      >
      </a>
      <a href="/" class="logo-area">
        <!-- <div class="gem"></div> -->
      </a>
      <h1 class="uppercase">舒光</h1>
      <h4>{{ new Date().toDateString() }}</h4>
    </div>
    <nav
      class="main-nav"
      :class="{
        'menu-mobile--opened': opened
      }"
      @click="changeOpened('cancel')"
    >
      <router-link class="link uppercase" :to="{name: 'Home'}">
        <span class="underline-x">主页</span>
      </router-link>
      <router-link  class="link uppercase" :to="{name: 'Home'}">
        <span class="underline-x">管理端</span>
      </router-link>
      <router-link  class="link uppercase" :to="{name: 'Article'}">
        <span class="underline-x">Article</span>
      </router-link>
      <router-link  class="link uppercase" :to="{name: 'Sponsors'}">
        <span class="underline-x">Sponsors</span>
      </router-link>
      <router-link  class="link uppercase" :to="{name: 'About'}">
        <span class="underline-x">关于我们</span>
      </router-link>
      <router-link  class="link uppercase" :to="{name: 'Faq'}">
        <span class="underline-x">FAQ</span>
      </router-link>
      <div class="social-links">
        <a href="https://gitee.com/topazur" class="twitter-link"></a>
        <a href="https://github.com/ducafecat" class="twitter-link"></a>
      </div>
    </nav>
    <div id="super-secret-designer-hack"></div>
  </header>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HomeHeader',
  props: {},
  setup() {
    const opened = ref(false);
    const changeOpened = (value: string) => {
      if (value === 'toggle') {
        opened.value = !opened.value;
      }
      if (value === 'cancel' && opened.value) {
        opened.value = false;
      }
    };
    return {
      opened,
      changeOpened,
    };
  },
});
</script>

<style lang="less" rel="stylesheet/less">
@import "~@/assets/css/variables.less";

/* 侧边栏 or Header */
.main-header {
  position: fixed;
  height: calc(100vh - 116px);
  font-size: @text14;
  color: #ea652c;
  font-weight: @fw6;
  background: url(~@/assets/images/bison.svg) 50% calc(100% - 17px)
    no-repeat;
  a {
    text-decoration: none;
    color: #fffbec;
    display: block;
    height: 28px;
    line-height: 28px;
    width: auto;
    padding: 0 12px;
    font-size: @text14;
    font-weight: @fw3 !important;
    &:hover {
      color: #f5c037;
    }
  }
  .z10 {
    h1 {
      display: none;
    }
    h4 {
      padding: 10px 12px 3px;
      margin: 0;
    }
    .menu-toggle {
      display: none;
    }
    .logo-area {
      // http://rubyconf.org/img/rubyconf-2021-denver.svg
      background: #fffbec url("~@/assets/song.svg") 50% no-repeat;
      border-radius: 17px;
      padding: 0;
      width: 170px;
      height: 170px;
      position: relative;
      .gem {
        width: 24px;
        height: 26px;
        background: #fffbec url(http://rubyconf.org/img/gem.gif) 0 2px no-repeat;
        background-size: 24px 24px;
        -webkit-animation-name: floaty;
        animation-name: floaty;
        -webkit-animation-duration: 2.25s;
        animation-duration: 2.25s;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        position: absolute;
        left: 83px;
        bottom: 25px;
      }
    }
  }
  .main-nav {
    .link {
      &.router-link-exact-active {
        color: #f5c037;
      }
    }
    .social-links {
      padding: 10px 12px 0;
      a {
        width: 16px;
        height: 16px;
        display: inline-block;
        margin: 0 5px 0 0;
        padding: 0;
        will-change: transform;
        &:hover {
          -webkit-transform: translateX(2px);
          transform: translateX(2px);
        }
        &.twitter-link {
          background: url(http://rubyconf.org/img/twitter-icon.svg) 50%
            no-repeat;
          background-size: 16px auto;
          // display: none !important;
        }
      }
    }
    /*
      &:not(.menu-mobile--opened) .underline-x {}
      此处不用not,而是使用媒体查询 -- 详情见下方`@media (min-width: 823px)`
    */
  }
}

/* 最大宽度为823px */
@media (max-width: 823px) and (orientation: landscape),
  screen and (max-width: 900px) and (orientation: portrait) {
  #super-secret-designer-hack {
    height: 8px;
    width: 100%;
    position: absolute;
    top: -16px;
    left: 0;
    background: #ffd801;
  }
  .main-header,
  .z10 {
    background: @homeBackgroundColor;
  }
  .main-header {
    /* no-padding */
    // width: calc(100% - 32px);
    width: calc(100% - 16px);
    height: 72px;
    border-right: 0;
    z-index: 20;
    border-radius: 12px 12px 0 0;
    .z10 {
      z-index: 10;
      position: relative;
      height: 80px;
      margin: -8px 0 0;
      padding: 19px 0 0 76px;
      border-radius: 2px 2px 0 0;
      h1 {
        display: block;
        color: #fffbec;
        font-size: @text16;
        // letter-spacing: 2px;
        // margin: 0 0 -5px;
      }
      h4 {
        padding: 0;
      }
      .menu-toggle {
        display: block;
        width: 64px;
        height: 64px;
        position: absolute;
        right: 0;
        top: 8px;
        background: url(~@/assets/images/menu.svg) 50% no-repeat;
        transition: transform 0.3s ease;
        transform-origin: center;
        will-change: transform;
        transform: translateZ(0) scale(1);
        &.menu-toggle--opened {
          background: url(~@/assets/images/menu-x.svg) 50% no-repeat;
          -webkit-transform: translateZ(0) scale(0.95);
          transform: translateZ(0) scale(0.95);
        }
      }
      .logo-area {
        width: 64px;
        height: 64px;
        position: absolute;
        left: 0;
        top: 8px;
        border-radius: 6px;
        background: #fffbec url("~@/assets/song.svg") 50% no-repeat;
        background-size: 50px auto;
        .gem {
          display: none;
        }
      }
    }
    .main-nav {
      z-index: 9;
      width: 100%;
      display: block;
      /* no-padding */
      // height: calc(100vh - 104px);
      height: calc(100vh - 80px);
      -webkit-transform: translateY(calc(-100vh - 70px));
      transform: translateY(calc(-100vh - 70px));
      -webkit-transition: -webkit-transform 0.35s ease-in-out;
      transition: -webkit-transform 0.35s ease-in-out;
      transition: transform 0.35s ease-in-out;
      transition: transform 0.35s ease-in-out,
        -webkit-transform 0.35s ease-in-out;
      will-change: transform;
      background: #171714 url(~@/assets/images/bison.svg) 50%
        calc(100% - 20px) no-repeat;
      border-top: 1px solid #2e2e2a;
      .social-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0;
        border-bottom: 1px solid #2e2e2a;
        border-left: 1px solid #2e2e2a;
        border-right: 1px solid #2e2e2a;
        a {
          height: 56px;
          display: block;
          width: auto;
          margin: 0;
          border-right: 1px solid #2e2e2a;
          font-weight: @fw6;
          &:last-child {
            border-right: none;
          }
        }
      }
      .link {
        padding: 0;
        height: 56px;
        line-height: 56px;
        display: block;
        text-indent: 15px;
        border-bottom: 1px solid #2e2e2a;
        border-left: 1px solid #2e2e2a;
        border-right: 1px solid #2e2e2a;
      }
      &.menu-mobile--opened {
        -webkit-transform: translate(0);
        transform: translate(0);
      }
    }
  }
}

/* 最小宽度为823px */
@media (min-width: 823px) and (orientation: landscape),
  screen and (min-width: 900px) and (orientation: portrait) {
  .main-nav {
    .underline-x {
      position: relative;
      z-index: 20;
      &:before {
        content: "";
        height: 0.18889em;
        position: absolute;
        bottom: -4px;
        left: -4px;
        right: -4px;
      }
      &:before {
        background-color: #f5c037;
        z-index: 11;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.5s ease;
        will-change: transform;
      }
    }
    .link:not(.router-link-exact-active):hover .underline-x:before {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
}
</style>
